<template>
  <div class="total">
    <div class="head">
      <el-button type="success" round style="float: left; margin: 20px 0 20px 150px" @click="back">返回</el-button>
      <ul class="list">
        <li class="top" v-for="(item, index) in title" :key="index">
          <router-link :to="item.path">
            <i :class="item.icon"></i>
            {{ item.name }}
          </router-link>
        </li>
      </ul>
    </div>
    <div class="carousel">
      <h3 class="title">最美季节评选</h3>
      <div class="rule">
        <h3 class="tit">—— 活动规则 ——</h3>
        <ul>
          <li class="rlist" v-for="(tit,index) in rule" :key="index">
            <i :class="tit.icon">
              {{ tit.name }}
              {{ tit.value }}
            </i>
          </li>
        </ul>
      </div>
    </div>

    <Foot></Foot>

  </div>
</template>

<script>
import Foot from '@/components/Footer'
export default {
    name:'MyMore',
    components:{
          Foot
      },
    data() {
      return {
      title: [
        { icon: "el-icon-data-board", name: "首页", path:'/interaction' },
        { icon: "el-icon-s-data", name: "详情", path:'/detail' },
        { icon: "el-icon-s-grid", name: "更多", path:'/more' },
      ],
      images: [
        require("@/assets/images/spring.jpg"),
        require("@/assets/images/summer.jpg"),
        require("@/assets/images/fall.jpg"),
        require("@/assets/images/winter.jpg"),
      ],
      rule:[
        {icon:"el-icon-time",name:"活动开始:",value:'2024-3-8'},
        {icon:"el-icon-time",name:"活动结束:",value:'2024-4-8'},
        {icon:"el-icon-circle-check",name:"活动规则:",value:'每个账号每天可以投5次，每个项目最多投1次'}
      ],
      }
    },
    methods:{
      back(){
        this.$router.push('/home')
      }
    }
}
</script>

<style scoped>
li{
  list-style: none;
}
.total {
  margin: 80px 0 10px 0;
  padding: 0;
  width: 100%;
  background-color: rgb(208, 255, 201);
}
.head {
  position: fixed;
  z-index: 999;
  top: 0;
  width: 100%;
  height: 80px;
  margin: 0 auto;
  text-align: center;
  background-color: green;
  opacity: 0.6;
}
.head .list {
  margin: 0 15%;
  height: 100%;
}
.head .top {
  width: 30%;
  height: 100%;
  float: left;
  list-style: none;
  margin: 0 5px;
}
.head .top a {
  display: block;
  text-decoration: none;
  line-height: 80px;
  color: #000;
}
.head .top a:hover {
  background-color: #67c23a;
  color: #fff;
}
.carousel {
  /* float: left; */
  width: 80%;
  height: 1300px;
  margin: 10px auto;
  background: url(../../../assets/images/jijie.png) no-repeat fixed top ;
  background-size: cover;
  border-radius: 8px;
}
.title{
  /* font-family: Impact, sans-serif; */
  text-align: center;
  font-size: 40px;
  color: #d39696;
  letter-spacing: 0;
  text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135 
}
.rule{
  height: auto;
  width: 80%;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 8px;
}
.tit{
  color: #67c23a;
  margin: 0 auto;
  text-align: center;
}
.rlist{
  list-style: none;
  padding: 3px 0;
}
</style>